<template>
	<view class="addlocal-root">


		<!-- 信息 -->
		<view class="addlocal-root-info">
			<view class="addlocal-root-info-list">
				<view class="left">收货人：</view>
				<input type="text" v-model="name" placeholder="请输入收货人姓名" style="color:#fff;"/>
			</view>
			<view class="addlocal-root-info-list">
				<view class="left">联系电话：</view>
				<input type="text" v-model="mobile" placeholder="请输入联系电话" style="color:#fff;"/>
			</view>
			<view class="addlocal-root-info-list" @tap="handleTap('picker3')">
				<view class="left">所在位置：</view>
				<view class="special" v-if="addtext == ''">
					<view class="special-left">
						<image :src="urls + '/app/center/local3.png'" mode=""></image>
						<view class="">小区、写字楼 学校</view>
					</view>
					<image :src="urls + '/app/center/enter.png'" mode=""></image>
				</view>
				<view class="special specials" v-else>
					{{ addtext }}
				</view>
			</view>
			<view class="addlocal-root-info-list">
				<view class="left">详细地址：</view>
				<input type="text" v-model="addr" placeholder="请输入道路、门牌号、小区、楼栋号等" style="color:#fff;"/>
			</view>
		</view>
		<lbPicker ref="picker3" v-model="value3" mode="multiSelector" :list="list" :level="3" @confirm="handleConfirm"
			@cancel="handleCancel">
		</lbPicker>
		<!-- <view class="flexs1">
			{{addtext != ''?addtext:'去选择'}}
			<view class="cuIcon-right"></view>
		</view> -->
		<!-- <u-picker mode="region" v-model="show" @confirm="addressInfo" :area-code='["13", "1303", "130304"]'></u-picker> -->
		<!-- <u-toast ref="uToast" /> -->
		<!-- 设为默认地址 -->
		<view class="addlocal-root-switch">
			<view class="left">设为默认地址</view>
			<u-switch v-model="checked" active-color="#FFAE2A" inactive-color="#FFAE2A"></u-switch>
		</view>

		<view class="addlocal-root-save allbtn" style="color: white;" @click="addAddress">保存</view>
	</view>
</template>

<script>
import lbPicker from '@/components/lb-picker/index.vue'
import areaData from '@/common/citydata.js'
export default {
	components: {
		lbPicker
	},
	data() {
		return {
			urls: this.$configs.urls,
			value3: [],
			list: [],
			name: '',
			mobile: null,
			province: '',
			city: '',
			area: '',
			addr: '',
			checked: false,
			show: false,
			addtext: '',
			province_id: '',
			city_id: '',
			district_id: '',
			id: '',
		}
	},
	onLoad(e) {
		if (e.items) {
			var item = JSON.parse(e.items)
			this.addtext = item.province + '-' + item.city + '-' + item.district
			this.province_id = item.province_id
			this.city_id = item.city_id
			this.district_id = item.district_id
			this.name = item.name
			this.mobile = item.mobile
			this.addr = item.detail
			this.id = item.id
			if (item.is_default == 1) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
		this.citydata()
	},
	methods: {
		citydata() {
			this.$Request.get(this.$api.user.cityList).then(res => {
				this.list = res.data
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			})
		},
		addAddress() {
			let status
			if (this.checked) {
				status = 1
			} else {
				status = 0
			}
			let data = {
				name: this.name,
				mobile: this.mobile,
				province_id: this.province_id,
				city_id: this.city_id,
				district_id: this.district_id,
				detail: this.addr,
				is_default: status,
				id: this.id
			}
			this.$Request.post(this.$api.user.addAddress, data).then(res => {
				uni.showToast({
					duration: 500,
					title: res.msg,
					icon: 'none'
				})
				if (res.code == 0) {
					setTimeout(res => {
						uni.navigateBack({
							delta: 1
						})
					}, 1500)
					clearTimeout();
				}
			});
		},
		shows() {
			this.show = true
		},
		addressInfo(data) {
			this.province = data.province.label
			this.city = data.city.label
			this.area = data.area.label
		},
		handleTap(picker) {
			this.$refs[picker].show()
		},
		handleConfirm(e) {
			this.addtext = e.item[0].label + '-' + e.item[1].label + '-' + e.item[2].label
			this.province_id = e.value[0]
			this.city_id = e.value[1]
			this.district_id = e.value[2]
			////console.log(this.province_id)
		},
		handleCancel(item) {
			////console.log('cancel::', item)
		},
	}
}
</script>

<style lang="scss" scoped>
.addlocal-root {
	width: 750rpx;
	height: 100vh;
	background-color: #262626;

	&-topbar {
		width: 100%;
		height: 140rpx;
		// background-color: #0078D7;
		display: flex;
		align-items: center;
		padding-top: 70rpx;


		&-title {
			color: white;
			font-size: 36rpx;
			flex-grow: 1.2;
			text-align: center;
			padding-right: 50rpx;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}

	&-info {
		width: 100%;
		height: 400rpx;
		// background-color: white;
		margin-bottom: 20rpx;

		&-list {
			width: 100%;
			height: 25%;
			padding: 0 20rpx;
			border-bottom: 2rpx solid #FED187;
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.special {
				width: 80%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #fff;

				image {
					width: 30rpx;
					height: 30rpx;
				}

				&-left {
					display: flex;
					align-items: center;

					image {
						margin-right: 20rpx;
					}
				}
			}

			.specials {
				padding-left: 15rpx;
			}

			input {
				width: 75%;
				margin-left: 20rpx;
				font-size: 30rpx;
			}

			.left {
				font-size: 28rpx;
				font-weight: 600;
				text-align: right;
				width: 150rpx;
				color: #fff;
			}
		}
	}

	&-switch {
		width: 100%;
		height: 88rpx;
		// background-color: white;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.left {
			font-size: 32rpx;
			font-weight: 500;
			color: #fff;
		}
	}

	&-save {
		width: 710rpx;
		height: 78rpx;
		border-radius: 39rpx;
		background-color: #282828;
		color: white;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		// margin: 226rpx auto;
		// margin: 0 auto;
		position: fixed;
		bottom: 35rpx;
		left: 20rpx;
		right: 20rpx;
	}
}

.addlocal-root-save {
	width: 496rpx;
	height: 88rpx;
	background: rgba(0, 0, 0, 0.1);
	box-shadow: inset 0rpx 0rpx 20rpx 0rpx rgba(255, 159, 0, 0.4);
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	opacity: 1;
	border: 1rpx solid #FFAE2A;
	font-size: 36rpx;
	font-family: Source Han Sans CN-Medium, Source Han Sans CN;
	font-weight: 500;
	color: #FFFFFF;
	line-height: 88rpx;
	margin: auto;
	text-align: center;
}
</style>
